<%@ include file="/WEB-INF/jsp/common.jsp"%>
<link rel="stylesheet" href="css/signin.css" type="text/css" media="all" />

	    <script type="text/javascript" src="js/formwizard/jquery.form.js"></script>
	    <script type="text/javascript" src="js/formwizard/jquery.validate.js"></script>
	
	    <script type="text/javascript" src="js/formwizard/bbq.js"></script>
	 
	    <script type="text/javascript" src="js/formwizard/jquery.form.wizard.js"></script>


  	<title>JQuery Form Wizard</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
    <style type="text/css">
    /* maing containers */

/* Element specific */

h3 {
	color: #000; //#48b0e5;
}



a {
	color: #000; //#48b0e5;
}

fieldset {
	border : 0;
	padding : 0;
	margin : 0;
}


/* Navigation */
#navigation li {
	display: inline;
	padding : 5px;
}

/* Main content */
#demo{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Documentation*/

.options-header {
	margin-left : 20px;
	padding: 5px;
}

.options-body-middle{
	//margin-left : 70px;
	padding: 5px;
}

.options-body-last{
	float :right;
	padding-right : 25px;
}

.options_body {
	width : 588px;
}


/* Demo Specifics */

#demoWrapper {
	//margin : 1em;
}

#fieldWrapper {
	padding : 1em; 
}

#demoNavigation {
	margin-top : 0.5em;
	margin-right : 1em;
	margin-bottom : 1em;
	text-align: right;
}

input {
	margin-right: 0.1em;
	margin-bottom: 0.5em;
}

.input_field_25em {
	width: 2.5em;
}

.input_field_3em {
	width: 3em;
}

.input_field_35em {
	width: 3.5em;
}

.input_field_12em {
	width: 12em;
}

label {
	margin-bottom: 0.2em;
	font-weight: bold;
	font-size: 0.8em;
}

label.error {
				color: red;
				font-size: 0.8em;
				margin-left : 0.5em;
			}


.step span {
	float: right;
	font-weight: bold;
	padding-right: 0.8em;
}

.navigation_button {
	width : 70px;
}

    

    </style>		
    
       	
    <style type="text/css">
    /* maing containers */

#registration_wrapper {
	background-color: #ddecf5;
	width : 500px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
	clear: both;
	min-width : 500px;
	position: relative;
	padding: 5px;
	margin-bottom: 5px;

}



    
    
    </style>		
    		
	</head>
	<body>
		<div id="registration_wrapper" class="border">
							<h3 class="signInTextSmallBold">School Registration</h3>
		 					
			
            <form:form id="schoolRegistrationForm" name="schoolRegistrationForm" action="register/registerSchool.htm" cssClass="bbq">

<div id="fieldWrapper">
				<span class="step" id="schoolDetails">
					<span class="font_normal_07em_black">First step - Enter School Details</span>
					<br />
                    <br/>
						<table border="0" cellpadding="0" cellspacing="0">

							<tr>
								<td class="signInTextSmallBold">School Name: *</td>
								<td class="createAccDiv2">
								
								<input id="school.name" name="school.name" type="text" tabindex="1" 
									class="signInTextSmallInpt mandatory valid required" value="" /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">School Alias:</td>
								<td class="createAccDiv2">
								
								<input id="school.alias" tabindex="2" name="school.alias" type="text"
									class="signInTextSmallInpt mandatory valid" value="" /></td>
							</tr>

							<tr>
								<td class="signInTextSmallBold">Address Line1: *</td>
								<td class="createAccDiv2">
								<input id="school.address.addressLine1" tabindex="3"
									 name="school.address.addressLine1" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" /></td>
							</tr>

							<tr>
								<td class="signInTextSmallBold">Address Line2:</td>
								<td class="createAccDiv2">
								<input id="school.address.addressLine2" tabindex="4"
									name="school.address.addressLine2" type="text"
									class="signInTextSmallInpt mandatory valid" value="" /></td>
							</tr>

							<tr>
								<td class="signInTextSmallBold">City: *</td>
								<td class="createAccDiv2">
								<input id="address.city" tabindex="5"
									name="address.city" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">State: *</td>
								<td class="createAccDiv2">
								<select class="signInTextSmallInpt mandatory valid required" id="state" name="school.address.state" tabindex="6">
					<option value="KA">KA</option>
					</select>
	            </td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">Zipcode: *</td>
								<td class="createAccDiv2">
								<input id="school.address.zipCode" tabindex="7"
									name="school.address.zipCode" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" /></td>
							</tr>

                     </table>


					<br/>
				</span>
				<span id="school-contact-info-id" class="step">
					<span class="font_normal_07em_black">Next step - Enter School Contact Details</span>
										<br />
                             <br/>

						<table border="0" cellpadding="0" cellspacing="0">
                   		<tr>
								<td class="signInTextSmallBold">Phone 1: *</td>
								<td class="createAccDiv2">
								
								<input id="school.address.contact.landline" tabindex="1" name="school.address.contact.landline" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">Phone 2:</td>
								<td class="createAccDiv2">
								
								<input id="school.address.contact.cell" tabindex="2" name="school.address.contact.cell" type="text"
									class="signInTextSmallInpt mandatory valid" value="" /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">Email: *</td>
								<td class="createAccDiv2">
								
								<input id="school.address.contact.email" tabindex="3" name="school.address.contact.email" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" /></td>
							</tr>
 							<tr>
								<td class="signInTextSmallBold">Contact Person:</td>
								<td class="createAccDiv2">
								
								<input id="school.address.contact.contactPerson" tabindex="3" name="school.address.contact.contactPerson" type="text"
									class="signInTextSmallInpt mandatory valid" value="" /></td>
							</tr>
                   
                       </table>
					
				</span>
				
				<span id="school-info-id" class="step">
					<span class="font_normal_07em_black">Next step - Enter School Details</span><br />
							<table border="0" cellpadding="0" cellspacing="0">

                  		<tr>
								<td class="signInTextSmallBold">Syllabus:</td>
								<td class="createAccDiv2">
								
								<input id="school.syllabus" tabindex="1" name="school.syllabus" type="text"
									class="signInTextSmallInpt mandatory valid" value="" />
									
								</td>
						</tr>

                  		<tr>
								<td class="signInTextSmallBold">University:</td>
								<td class="createAccDiv2">
								
								<input id="school.university" tabindex="21" name="school.university" type="text"
									class="signInTextSmallInpt mandatory valid" value="" />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">Theme:</td>
								<td class="createAccDiv2">
								
							    <input id="city-id" tabindex="3" name="school.theme" type="text"
									class="signInTextSmallInpt mandatory valid" value="" />
									
								</td>
						</tr>

					</table>

				</span>
				<!-- if user logged in already then treat him as admin and skip this part -->
				
				<c:if test="${sessionScope.CURRENT_USER == null}">
				<span id="confirmation" class="step">
					<span class="font_normal_07em_black">Last step - Admin creation</span><br />
							<table border="0" cellpadding="0" cellspacing="0">

                  		<tr>
								<td class="signInTextSmallBold">User name:</td>
								<td class="createAccDiv2">
								
								<input id="username" tabindex="1" name="username" type="text"
									class="signInTextSmallInpt mandatory valid" value="" />
									
								</td>
						</tr>

                  		<tr>
								<td class="signInTextSmallBold">Email:</td>
								<td class="createAccDiv2">
								
								<input id="address.contact.email" tabindex="2" name="address.contact.email" type="text"
									class="signInTextSmallInpt mandatory valid" value="" />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">First Name: *</td>
								<td class="createAccDiv2">
								
								<input id="firstName" tabindex="3" name="firstName" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">Last Name: *</td>
								<td class="createAccDiv2">
								
								<input id="lastName" tabindex="4" name="lastName" type="text"
									class="signInTextSmallInpt mandatory valid required" value="" />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">Password:</td>
								<td class="createAccDiv2">
								
							    <input id="password" tabindex="5" name="password" type="password"
									class="signInTextSmallInpt mandatory valid required" value="" />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">Retype password:</td>
								<td class="createAccDiv2">
								
							    <input id="retypePassword" tabindex="6" name="retypePassword" type="password"
									class="signInTextSmallInpt mandatory valid required" value="" />
									
								</td>
						</tr>

					</table>

				</span>	
				
					</c:if>		
				</div>

<div id="demoNavigation"> 							
					<input class="navigation_button" id="back" value="Back" type="reset" />
					<input class="navigation_button" id="next" value="Next" type="submit" />
				</div>
			
			</form:form>
		 				</div>
			
	
	
	
	    <script type="text/javascript" src="js/formwizard/jquery.form.js"></script>
	    <script type="text/javascript" src="js/formwizard/jquery.validate.js"></script>
	
	    <script type="text/javascript" src="js/formwizard/bbq.js"></script>
	 
	    <script type="text/javascript" src="js/formwizard/jquery.form.wizard.js"></script>
	    
	
	<script type="text/javascript">
	$(function(){
		$("#schoolRegistrationForm").formwizard({ //wizard settings
		 	historyEnabled : true, 
		 	formPluginEnabled: true, 
		 	validationEnabled : true,
		 	focusFirstInput : true,
		 	validationOptions : {
				messages: {	email: "Please enter valid email address"}																
		 	},
			formOptions : {
				success: function(data){
					 if (data) {
						 alert(data);
							$('#createaccount-message-div').html( data.message);

	                        if(data.result=='success'){

                             $('#createaccount-next-action-div').show();                                
 	                       }
							
						 }
					},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
						$('#createaccount-message-div').html("Error creating account to myschool.Error:"+errorThrown+"<br/>Please refresh the web page ");
				},
				beforeSubmit: function(data){
					alert(data);
					},
				dataType: 'json',
				resetForm: true
			}
		 });
	});
</script>		
	</body>
</html>
